<template>
  <div>
    <a-modal v-model="visible" :width="820" title="加班规则" @ok="okHander">
      <a-form class="lab_l form_l">
        <a-form-item label="加班方式" :label-col="{ span: 3 }" :wrapper-col="{ span: 16 }">
          <a-radio-group v-model="obj.overtimeRule">
            <a-row>
              <a-radio class="w110 gutter" :value="1">以加班申请为准</a-radio>
              <span class="sub_tit">加班申请通过后,直接记录加班时长</span>
            </a-row>
            <a-row>
              <a-radio class="w110 gutter" :value="2">以打卡时间为准</a-radio>
              <span class="sub_tit">根据打卡时间启动加班时长</span>
            </a-row>
            <a-row>
              <a-radio class="w110 gutter" :value="3">
                以加班申请可算打卡记录
              </a-radio>
              <span class="sub_tit">打卡后,根据加班申请核算加班时长</span>
            </a-row>
          </a-radio-group>
        </a-form-item>
        <template v-if="obj.overtimeRule !== 1">
          <div class="sub_tit mg_b20">加班规则:</div>
          <a-row>
            <a-checkbox v-model="obj.workDayRuleDTO.isWorkDay" class="mg_b20">
              允许工作日加班
            </a-checkbox>
          </a-row>
          <!-- 允许工作日加班 -->
          <template v-if="obj.workDayRuleDTO.isWorkDay && obj.overtimeRule === 2">
            <div class="mg_b20">
              <span class="sub_tit mg_r10">加班开始时间:</span>
              下班后
              <a-input v-model="obj.workDayRuleDTO.startMinutes" size="small" style="width: 40px" />
              分钟开始计算加班
            </div>
            <div class="mg_b20">
              <span class="sub_tit mg_r10">最短加班时长:</span>
              <a-input v-model="obj.workDayRuleDTO.shortMinutes" size="small" style="width: 40px" />
              分钟 <span class="sub_tit mg_l20">不足30分钟记录为未加班</span>
            </div>
            <div class="mg_b20">
              <span class="sub_tit mg_r10">最长加班时长:</span>
              <a-input v-model="obj.workDayRuleDTO.longestMinutes" size="small" style="width: 40px" />
              分钟 <span class="sub_tit mg_l20">超过则记录为 40分钟</span>
            </div>
          </template>
          <!-- 允许非工作日加班 -->
          <a-row>
            <a-checkbox v-model="obj.nonWorkDayRuleDTO.isNonWorkDay" class="mg_b20">允许非工作日加班</a-checkbox>
          </a-row>
          <template v-if="obj.nonWorkDayRuleDTO.isNonWorkDay && obj.overtimeRule === 2">
            <div class="mg_b20">
              <span class="sub_tit mg_r10">最短加班时长:</span>
              <a-input v-model="obj.nonWorkDayRuleDTO.shortMinutes" size="small" style="width: 40px" />
              分钟 <span class="sub_tit mg_l20">不足30分钟记录为未加班</span>
            </div>
            <div class="mg_b20">
              <span class="sub_tit mg_r10">最长加班时长:</span>
              <a-input v-model="obj.nonWorkDayRuleDTO.longestMinutes" size="small" style="width: 40px" />
              分钟 <span class="sub_tit mg_l20">超过则记录为 40分钟</span>
            </div>
          </template>
        </template>
        <div style="height: 50px" />
      </a-form>
    </a-modal>
  </div>
</template>

<script>
export default {
  props: {
    doWorkRulesOptions: {
      type: Object,
      default: () => ({
        show: false,
        obj: {}
      })
    }
  },
  data() {
    return {
      visible: false,
      obj: {
        overtimeRule: 1,
        nonWorkDayRuleDTO: {
          isNonWorkDay: true,
          longestMinutes: 240,
          shortMinutes: 30
        },
        workDayRuleDTO: {
          isWorkDay: true,
          longestMinutes: 240,
          shortMinutes: 30,
          startMinutes: 30
        }
      }
    };
  },

  watch: {
    doWorkRulesOptions(val) {
      this.visible = val.show;
    }
  },

  methods: {
    okHander() {
      this.$emit("addWorkRules", this.obj);
      this.visible = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.form_l {
  margin-left: 50px;
}
.gutter {
  padding-top: 10px;
}
</style>
